import React from "react"
import { Space } from "@taroify/core"
import GpContainer from "@/components/GpContainer"
import { Image, Text, View } from "@tarojs/components"
import GpDot from "@/components/GpDot"
import GpRate from "@/components/GpRate"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpTabbar from "@/components/GpTabbar"
import Taro from "@tarojs/taro"
import { getStuComments } from "@/apis/index"
import GpEmpty from "@/components/GpEmpty"
import { setPageMeta } from "@/utils/common"
import styles from "./index.module.scss"
import clsx from "clsx"

const ports = [{ text: "学员评论" }]
type IState = {
  comments: IApiRelative.IGetStuComments.IComment[]
}
class TrainGuide extends React.Component<unknown, IState> {
  constructor(props) {
    super(props)
    this.state = {
      comments: []
    }
  }
  onLoad() {
    this.getPageData()
  }
  onShareAppMessage() {}
  componentDidShow() {
    setPageMeta({
      keywords: "学员评价，机构口碑",
      title: "学员评价-择艺宝",
      description:
        "择艺宝为你展示平台近期报读学员真实评价，助你快速了解机构教学成果，为您选择学校提供参考。"
    })
  }
  getPageData = () => {
    Taro.showLoading()
    getStuComments()
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          this.setState({
            comments: retData.comments || []
          })
        }
      })
      .finally(() => {
        Taro.hideLoading()
      })
  }
  renderContent = () => {
    const { comments } = this.state
    const commentLen = comments.length
    return (
      <View>
        {/* 背景图 */}
        <Image
          src="https://static.91goodschool.com/UpFiles/public/yikao/image/background.jpg"
          className="w-750px h-355px box-border"
        />
        {/* 内容 */}
        <View className="bg-hex-fff w-750px px-30px pb-48px  box-border">
          <View className={styles["transform-top"]}>
            <View className="flex flex-col">
              {/* item for loop */}
              {commentLen > 0 ? (
                comments.map((l, index) => (
                  <View
                    key={index}
                    className={clsx(styles["comment-item"], {
                      "mb-24px": index !== commentLen - 1
                    })}
                  >
                    <View className="flex flex-row items-center">
                      <Image src={l.avatar} className="w-88px h-88px rounded-1 flex-none" />
                      <View className="ml-28px flex-1 flex flex-col">
                        <View className="flex flex-row justify-between items-center">
                          <View className="yahei-bold font-bold text-28px text-hex-2c2c35">
                            {l.name}
                          </View>
                          {/* <View className="yahei font-normal text-24px text-hex-ff3221">
                            获￥88.88返现
                          </View> */}
                        </View>
                        <GpRate
                          rate={l.score}
                          showRateText={false}
                          className="my-12px"
                          rateClassName={styles["coment-rate"]}
                        />
                        <Space className={styles["rate-item-space"]} size="small">
                          <View className="yahei font-normal text-24px text-hex-b8b8bf">
                            环境 {l.envScore}
                          </View>
                          <View className="yahei font-normal text-24px text-hex-b8b8bf">
                            师资 {l.teachersScore}
                          </View>
                          <View className="yahei font-normal text-24px text-hex-b8b8bf">
                            教学 {l.teachServiceScore}
                          </View>
                        </Space>
                      </View>
                    </View>
                    {/* 评论内容 */}
                    <View className="mt-24px">
                      {/* 文本评论 */}
                      <View className="yahei font-normal text-28px leading-48px text-left text-hex-333">
                        {l.content}
                      </View>
                      {/* 图片评论 */}
                      {l.images && l.images.length > 0 ? (
                        <View className={styles["image-wrap"]}>
                          {l.images.map((item, i) => (
                            <Image
                              key={i}
                              src={item}
                              className="w-150px h-150px box-border rounded-8px"
                            />
                          ))}
                        </View>
                      ) : null}
                    </View>
                    <View className="yahei font-normal text-24px text-hex-b8b8bf mt-24px">
                      点评机构：{l.agencyName}
                    </View>
                  </View>
                ))
              ) : (
                <GpEmpty />
              )}
            </View>
          </View>
          <View className={styles["comment-text"]}>*点评均为最新评价</View>
          {/* 评价规则 */}
          <View className="mt-56px bg-hex-fff pl-19px pr-30px">
            <View className="yahei font-bold text-36px text-hex-2c2c35">领取规则</View>
            <View className="mt-34px">
              <View className="flex items-start">
                <View className="h-40px box-border flex-none flex items-center mr-7px">
                  <GpDot size={8} color="#AEAFC0" className="my-auto" />
                </View>
                <View className="yahei font-normal text-28px leading-42px text-hex-2c2c35 break-all">
                  需要通过好学校报名课程后。才能点评领取奖励
                </View>
              </View>
              <View className="flex items-start">
                <View className="h-40px box-border flex-none flex items-center mr-7px">
                  <GpDot size={8} color="#AEAFC0" className="my-auto" />
                </View>
                <View className="yahei font-normal text-28px leading-42px text-hex-2c2c35 break-all">
                  经好学校与机构审核后，将有机会领取
                  <Text className="text-hex-FF3221">至多1500元</Text>现金奖励
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  render(): React.ReactNode {
    return (
      <GpContainer>
        <View>
          {this.renderContent()}
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          {/* 当前位置 */}
          <GpCurrentPort ports={ports} />
        </View>
        {/* 底部导航 */}
        <GpTabbar />
      </GpContainer>
    )
  }
}
export default TrainGuide
